<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<h2>Sign up and start now. It's free.</h2>
<div style="height: 15px;" class="questionnaire_submit_button"></div>
<div id="regFormMessageDiv" style="display: none;" class='error'>
		<img style="height:20px; float: left;" alt="error" src="/static/images/ERROR.gif" /> <span id="regFormMessage" > 
	</span>
</div>
<form:form  action="javascript:void(0)" dojoType="dijit.form.Form" commandName="newUser" id="registerForm"	data-dojo-id="registerForm">

	<table>
		<tr>
			<td style="vertical-align: top;">
				<div id="filedrag" style="border: 1px dashed black; width: 150px; height: 150px">
					<p>Drag image here</p>
				</div>
			</td>
			<td>
				<table>
					<tr>
						<td>First Name:</td>
						<td style="width: 220px;">
							<form:input path="firstName"  type="text" required="true" placeholder="First Name" 
								dojoType="dijit.form.ValidationTextBox" missingMessage="Please Enter First Name" />
						</td>
						<td style="margin-left: 30px">Last Name:</td>
						<td>
							<form:input path="lastName"  type="text" required="true" placeholder="Last Name" 
								dojoType="dijit.form.ValidationTextBox" missingMessage="Please Enter Last Name" />
						</td>
					</tr>
					<tr>
						<td>Email Address:</td>
						<td>
							<form:input path="email"  type="text" required="true" placeholder="Email Address" 
								dojoType="dijit.form.ValidationTextBox" missingMessage="Please Enter Email Address" validator="dojox.validate.isEmailAddress"  />
						</td>
						<td style="margin-left: 30px">Password:</td>
						<td>
							<form:input path="password"  type="password" required="true" placeholder="Password" 
								dojoType="dijit.form.ValidationTextBox" missingMessage="Please Enter Password" />
						</td>
					</tr>
					
					<tr>
						<td>Gender:</td>
						<td>
							<form:radiobutton path="gender" value="1" label="Male"/>
							<form:radiobutton path="gender" value="2" label="Female" />
						</td>
						<td style="margin-left: 30px">Date of Birth:</td>
						<td>
							<form:input path="dateOfBirth"  type="text" required="true"  
								dojoType="dijit.form.DateTextBox" missingMessage="Please Enter Date of Birth" />
						</td>
					</tr>
					
					<tr>
						<td colspan='4'>
							<div class="questionnaire_submit_button" style="margin-left: 30px; margin-top: 20px;" >
								<button  type="submit" name="submit" value="submit" id="userRegisterSubmitButton" class="ui-action-tag action-primary"><span class="ui-action"><span class="ui-action-content">Sign Up</span></span></button>
								<br><span class="sub_message" >By clicking Sign Up you agree to our <a href="javascript:void(0);">terms of use</a> and <a href="javascript:void(0);">privacy policy</a> </span>
							</div>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<input id="imageBlobKey" type="hidden" name="imageBlobKey"> 
</form:form>
<script>
	//call initialization file
	uploadurl = '<c:out value="${uploadurl}"></c:out>';
	if (window.File && window.FileList && window.FileReader) {
		initFileUpload(uploadurl);
	}
</script>